<template>
    <div style="position:relative;height:100%">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
        <div class="total-num">
            {{ '总数量' + info.total + '个' }}
        </div>
        <ItemSyncDetail
            :show="detailShow"
            v-if="detailShow"
            :info="{ ...info, successNum: data[0].value, errorNum: data[1].value + data[2].value }"
            :riskEntryTypeObj="riskEntryTypeObj"
            @item-sync-detail="itemSyncDetailHandle"
        ></ItemSyncDetail>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import ItemSyncDetail from './item-sync-detail.vue';

@Component({
    name: 'ItemPieFilled',
    components: {
        ItemSyncDetail,
    },
})
/**
 * title:表头
 */
export default class ItemPieFilled extends Vue {
    @Prop()
    data: any[];

    @Prop() info: any;

    chartInstance: any = null;
    @Prop() title: string;

    @Prop() riskEntryTypeObj: any;

    detailShow: boolean = false;

    fontSizeValue: number = 12;
    @Watch('data', { deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart();
            });
        }
    }

    mounted() {
        this.initChart();
        this.updateChart();
    }

    bgBase = { width: 6, height: 6, borderRadius: 50, marginRight: 5 };

    fSize: number = 9;

    getFontSize(res) {
        // console.log('1111111111111111111');
        // const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        // if (!clientWidth) return;
        // let fontSize = clientWidth / 1920;
        // console.log(res, fontSize, res * fontSize);
        // return res * fontSize;
        return res - 2;
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        let initOption = {
            title: {
                show: true,
                text: `{a|}{b|${this.title}}`,
                textStyle: {
                    color: 'black',
                    fontWeight: 'bold',
                    rich: {
                        a: {
                            width: 12,
                            height: 12,
                            borderRadius: 50,
                            borderWidth: 4,
                            borderColor: '#2288ff',
                            borderType: 'solid',
                            verticalAlign: 'top', // 对齐方式
                        },
                        b: {
                            fontWeight: 'bold',
                            fontSize: 15,
                            padding: [0, 0, 0, 5],
                        },
                    },
                },
            },
            toolbox: {
                show: true,
                itemSize: 17,
                showTitle: false,
                top: -5,
                feature: {
                    myTool1: {
                        show: true,
                        title: '刷新',
                        icon:
                            'path://M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z',
                        //   设置颜色时放开
                        iconStyle: {
                            borderColor: '#7b7b7b',
                        },
                        emphasis: {
                            iconStyle: {
                                borderColor: '#91cc75',
                            },
                        },
                        onclick: () => {
                            this.refresh();
                        },
                    },
                    myTool3: {
                        show: true,
                        title: '数据视图',
                        icon: 'path://M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28',
                        emphasis: {
                            iconStyle: {
                                borderColor: '#91cc75',
                            },
                        },
                        onclick: () => {
                            this.detailShow = true;
                        },
                    },
                },
                // tooltip: {
                //     show: true,
                //     formatter: param => {
                //         return param.title;
                //     },
                //     backgroundColor: '#f5f5f5',
                //     textStyle: {
                //         fontSize: 12,
                //     },
                //     // extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 自定义的 CSS 样式
                // },
            },
            tooltip: {
                show: true,
                trigger: 'item',
                confine: true,

                // position: function(p) {
                //     // 其中p为当前鼠标的位置
                //     return [p[0] + 15, p[1] - 15];
                // },
                // formatter: function(param) {
                //     return param.name + '<br/>' + param.marker + param.value + '个' + '&nbsp' + param.percent + '%';
                // },

                formatter: function(param) {
                    return `<span class="tooltip-box">${param.name} <br/>${param.marker}${param.value}个 ${param.percent}%</span>`;
                },
                backgroundColor: '#f5f5f5',
                textStyle: {
                    // color: '#878484',
                    color: '#6f6d6d',
                },
            },
            legend: {
                // orient: 'vertical',
                icon: 'circle',
                right: 'auto',
                bottom: '1%',
                selectedMode: false,
                itemGap: 10,
                itemHeight: 8, // 修改icon图形大小
                itemWidth: 10,
                textStyle: {
                    fontSize: this.fontSizeValue,
                },
            },
            color: ['#76bdfe', '#96a0fd', '#f48d9e'],
            series: [
                // {
                //     type: 'pie',
                //     radius: '50%',
                //     startAngle: '315',
                //     center: ['45%', '50%'],
                //     stillShowZeroSum: false,
                //     avoidLabelOverlap: true, // 是否启用防止标签重叠策略
                //     // minAngle: 14, // 防止内部标签重叠
                //     minShowLabelAngle: 0.01,
                //     label: {
                //         // rotate: 'radial',
                //         show: true,
                //         position: 'inner',
                //         formatter: '{d}%',
                //         fontSize: this.getFontSize(12),
                //         color: 'black',
                //         fontWeight: 'normal',
                //     },
                //     // labelLine: {
                //     //     show: true,
                //     // },
                //     emphasis: {
                //         // scale: true,
                //         // scaleSize: 1.2,
                //         label: {
                //             show: true,
                //         },
                //     },
                //     data: this.data,
                // },
                {
                    type: 'pie',
                    radius: '48%',
                    startAngle: '315',
                    center: ['50%', '54%'],
                    stillShowZeroSum: false,
                    avoidLabelOverlap: true, // 是否启用防止标签重叠策略

                    // label: {
                    //     show: true,
                    //     position: 'outer',
                    //     smooth: 0.2,
                    //     // alignTo: 'edge',
                    //     // margin: 20,
                    //     distanceToLabelLine: 1,
                    //     formatter: function(params) {
                    //         const name = params.name;
                    //         const value = params.data.value;
                    //         const index = params.dataIndex;
                    //         return `{bg${index}|}{b${index}|${name}}\n{c|${value}个}\n\n`;
                    //     },
                    //     padding: [0, -35, 0, -25], // 设置外部文字的位置
                    //     rich: {
                    //         bg0: {
                    //             ...this.bgBase,
                    //             backgroundColor: '#76bdfe',
                    //         },
                    //         bg1: {
                    //             ...this.bgBase,
                    //             backgroundColor: '#96a0fd',
                    //         },
                    //         bg2: {
                    //             ...this.bgBase,
                    //             backgroundColor: '#f48d9e',
                    //         },
                    //         b0: {
                    //             color: '#333',
                    //             fontSize: this.getFontSize(12),
                    //             lineHeight: 12,
                    //             padding: [0, 20, 0, 2],
                    //         },
                    //         b1: {
                    //             color: '#333',
                    //             fontSize: this.getFontSize(12),
                    //             lineHeight: 12,
                    //             padding: [0, 0, 0, 2],
                    //         },
                    //         b2: {
                    //             color: '#333',
                    //             fontSize: this.getFontSize(12),
                    //             lineHeight: 12,
                    //             padding: [0, 0, 0, 2],
                    //         },
                    //         c: {
                    //             fontSize: this.getFontSize(12),
                    //             lineHeight: 12,
                    //             color: '#a4a4a4',
                    //             align: 'left',
                    //             padding: [0, 0, 0, 8],
                    //         },
                    //     },
                    // },
                    label: {
                        // rotate: 'radial',
                        show: true,
                        position: 'outer',
                        formatter: '{d}%',
                        fontSize: this.getFontSize(14),
                        color: 'black',
                        fontWeight: 'normal',
                    },
                    labelLine: {
                        show: true,
                        length: 10,
                        length2: 10,
                        smooth: 0.2,
                        // minTurnAngle: 10, // 两条指示线之间的角度
                        // maxSurfaceAngle: 190, // 指示线与扇形的角度
                        // lineStyle: {
                        //     color: '#a4a4a4',
                        //     width: 1,
                        // },
                    },
                    data: this.data,
                },
                {
                    type: 'pie',
                    radius: '48%',
                    startAngle: '315',
                    center: ['50%', '54%'],
                    label: {
                        show: true,
                        color: '#fff',
                        fontSize: 14,
                        position: 'center',
                        formatter: '暂无数据',
                    },
                    color: ['#60b2fd'],
                    tooltip: { show: false },
                    data: [],
                },
            ],
            // graphic: [
            //     {
            //         type: 'text',
            //         left: 'center',
            //         top: 'center',
            //         style: {
            //             text: '暂无数据',
            //             fill: 'red',
            //             fontSize: 14,
            //             width: 12,
            //             height: 12,
            //             backgroundColor: 'blue',
            //             padding: 6,
            //         },
            //     },
            // ],
        };
        this.chartInstance.setOption(initOption);
    }

    updateChart() {
        // 平均值
        const dataOption = {
            series: [
                // {
                //     data: this.data,
                //     label: {
                //         fontSize: this.getFontSize(12),
                //     },
                // },
                {
                    data: this.data,
                    label: {
                        show: this.info.total,
                    },
                    labelLine: { show: this.info.total },
                },
                { data: this.info.total ? [] : [{ label: '支持', value: '0' }] },
            ],
        };
        this.chartInstance.setOption(dataOption);
    }
    // 刷新
    refresh() {
        this.$emit('refresh', this.title);
    }

    // 同步明细回调
    itemSyncDetailHandle() {
        this.detailShow = false;
    }
}
</script>

<style scoped>
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.total-num {
    position: absolute;
    top: 10%;
    right: 0px;
    color: #fff;
    background-color: #578bec;
    padding: 5px;
    font-size: 13px;
    background: url('../images/item-monitor-total.png');
    background-size: 100% 30px;
    background-repeat: no-repeat;
}

.com-chart /deep/ .tooltip-box {
    transform: scale(0.8);
    display: block;
}
</style>
